<template>
	<view class="container">
		<view class="service-policy">
			<view class="item">付款后请联系店员收货</view>
			<view class="item">如申请退货请联系店员</view>
		</view>
		<view class="no-cart" v-if="cartGoods.length <= 0">
			<view class="c">
				<view class="title-box">
					购物车空空如也～
				</view>
				<view class="to-index-btn" @tap="toIndexPage">
					去逛逛
				</view>
			</view>
		</view>
		<view class="cart-view" v-if="cartGoods.length > 0">
			<view class="list">
				<view class="group-item">
					<view class="goods">
						<view class="item" v-for="(item, index) in cartGoods" :key="index">
							<tui-swipe-action :actions="actions" @click="deleteCartByItem({'item':item})">
								<view slot="content">
									<view :class="'checkbox ' + (item.checked ? 'checked' : '')" @tap="checkedItem" :data-item-index="index"></view>
									<view class="cart-goods">
										<view>
											<image class="img" :src="item.listPicUrl"></image>
										</view>
										<view class="info">
											<view class="t">
												<view class="name">
													<text>{{item.goodsName}}</text>
												</view>
												<view class="goods-do">
													<text class="price">￥{{item.retailPrice}}</text>
													<text class="org-price">{{item.marketPrice?'￥'+item.marketPrice:''}}</text>
												</view>
												<text class='name-value'>{{item.goodsSpecifitionNameValue || ''}}</text>
												<view class='number'>
													<tui-numberbox :iconSize="22" :height="38" :width="56" :custom="item" :value="item.number" :step="1" :min="0"
													 @change="changeNumber"></tui-numberbox>
												</view>
											</view>
										</view>
									</view>
								</view>
							</tui-swipe-action>
						</view>
					</view>
				</view>
			</view>
			<view class="cart-bottom">
				<view :class="'checkbox '+ (checkedAllStatus ? 'checked' : '')" @tap="checkedAll">全选({{cartTotal.checkedGoodsCount}})</view>
				合计：
				<view class="total">￥{{cartTotal.checkedGoodsAmount}}</view>
				<view class="checkout" @tap="checkoutOrder">下单</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				actions: [{
					name: '删除',
					color: '#fff',
					fontsize: '22',
					width: 80,
					//icon: 'like.png',//此处为图片地址
					background: '#ed3f14'
				}],
				shopsId: 0,
				cartGoods: [],
				cartTotal: {
					"goodsCount": 0,
					"goodsAmount": 0.00,
					"checkedGoodsCount": 0,
					"checkedGoodsAmount": 0.00
				},
				checkedAllStatus: true,
				editCartList: []
			}
		},
		methods: {
			toIndexPage: function() {
				uni.switchTab({
					url: "/pages/index/index"
				});
			},
			getCartList: function() {
				let that = this;
				util.request('cart/myCart', {
					shopsId: that.shopsId
				}).then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			isCheckedAll: function() {
				//判断购物车商品已全选
				return this.cartGoods.every(function(element, index, array) {
					if (element.checked == true) {
						return true;
					} else {
						return false;
					}
				});
			},
			checkedItem: function(event) {
				let itemIndex = event.target.dataset.itemIndex;
				let that = this;

				util.request('cart/checked', {
					id: that.cartGoods[itemIndex].id,
					shopsId: that.shopsId,
					isChecked: that.cartGoods[itemIndex].checked ? 0 : 1
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			getCheckedGoodsCount: function() {
				let checkedGoodsCount = 0;
				this.cartGoods.forEach(function(v) {
					if (v.checked === true) {
						checkedGoodsCount += v.number;
					}
				});
				return checkedGoodsCount;
			},
			checkedAll: function() {
				let that = this;

				let cartIds = that.cartGoods.map(function(element, index, array) {
					return element.id;
				});

				util.request('cart/checked', {
					cartIds: cartIds,
					shopsId: that.shopsId,
					isChecked: that.checkedAllStatus ? 0 : 1
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			updateCart: function(goodsId, number, id) {
				let that = this;

				util.request('cart/update', {
					shopsId: that.shopsId,
					goodsId: goodsId,
					number: number,
					id: id
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});

			},
			changeNumber: function(event) {
				let that = this;
				let cartItem = event.custom;
				let number = event.value;
				cartItem.number = number;
				that.cartGoods = that.cartGoods;
				that.updateCart(cartItem.goodsId, number, cartItem.id);
			},
			checkoutOrder: function() {
				//获取已选择的商品
				let that = this;

				var checkedGoods = that.cartGoods.filter(function(element, index, array) {
					if (element.checked == true) {
						return true;
					} else {
						return false;
					}
				});

				if (checkedGoods.length <= 0) {
					return false;
				}


				uni.navigateTo({
					url: '../shopping/checkout/checkout?shopsId=' + that.shopsId
				})
			},
			deleteCartByItem: function(event) {
				//获取已选择的商品
				let that = this;

				let cartIds = [event.item.id];

				util.request('cart/delete', {
					cartIds: cartIds.join(','),
					shopsId: that.shopsId
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			}
		},
		onLoad: function(options) {
			let that = this;
			// 页面初始化 options为页面跳转所带来的参数
			if (options.shopsId) {
				that.shopsId = options.shopsId
			}

		},
		onShow: function() {
			// 页面显示
			this.getCartList();
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			this.getCartList();
			// 隐藏导航栏加载框
			uni.hideNavigationBarLoading();
			// 停止下拉动作
			uni.stopPullDownRefresh();
		}
	}
</script>

<style>
	page {
		height: 100%;
		min-height: 100%;
		background: #f4f4f4;
	}

	.container {
		background: #f4f4f4;
		width: 100%;
		height: auto;
		min-height: 100%;
		overflow: hidden;
	}

	.service-policy {
		height: 73rpx;
		background: #f4f4f4;
		padding: 0 31.25rpx;
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
	}

	.service-policy .item {
		background: url() 0 center no-repeat;
		background-size: 10rpx;
		padding-left: 15rpx;
		display: flex;
		align-items: center;
		font-size: 25rpx;
		color: #666;
	}

	.no-cart {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.no-cart .c {
		width: 100%;
		height: auto;
		margin-bottom: 150rpx;
	}

	.no-cart .c image {
		margin: 0 auto;
		display: block;
		text-align: center;
		width: 258rpx;
		height: 258rpx;
	}

	.no-cart .c text {
		margin: 0 auto;
		display: block;
		width: 258rpx;
		height: 29rpx;
		line-height: 29rpx;
		text-align: center;
		font-size: 29rpx;
		color: #999;
	}

	.title-box {
		width: 100%;
		padding-top: 200rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;
		background: url() no-repeat center 105rpx;
		background-size: 100rpx auto;
		margin-bottom: 50rpx;
	}

	.to-index-btn {
		color: #fff;
		background: #58C1E7;
		border-radius: 6px;
		width: 300rpx;
		height: auto;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		margin: 0 auto;
		display: block;
	}

	.cart-view {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.cart-view .list {
		height: auto;
		width: 100%;
		overflow: hidden;
		/* margin-bottom: 10rpx; */
	}

	.cart-view .group-item {
		height: auto;
		width: 100%;
		background: #fff;
		margin-bottom: 18rpx;
	}

	.cart-view .item {
		height: 200rpx;
		width: 100%;
		overflow: hidden;
		margin: 20rpx 0;
	}

	.cart-view .item .checkbox {
		float: left;
		height: 40rpx;
		width: 6%;
		background: url() no-repeat;
		background-size: 40rpx;
		margin: 60rpx 10rpx;
	}

	.cart-view .item .checkbox.checked {
		background: url() no-repeat;
		background-size: 40rpx;
		margin: 60rpx 10rpx;
	}

	.cart-view .item .cart-goods {
		float: left;
		width: 90%;
		position: relative;
	}

	.cart-view .item .img {
		float: left;
		height: 120rpx;
		width: 120rpx;
		background: #f4f4f4;
		margin: 19.5rpx 18rpx 19.5rpx 0;
	}

	.cart-view .item .info {
		margin: 20rpx 0;
	}

	.cart-view .item .t {
		margin: 8rpx 0;
		font-size: 25rpx;
		color: #333;
	}

	.cart-view .item .cart-goods .name {
		width: 335rpx;
		font-size: 25rpx;
		color: #333;
		/* display: inline-block; */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: pre-line;
		word-wrap: break-word;
		word-break: break-all;
	}

	.cart-view .item .goods-do {
		position: absolute;
		right: 0rpx;
		top: 20rpx;
	}

	.number {
		position: absolute;
		right: 0rpx;
		top: 90rpx;
	}

	.cart-view .item .goods-do .org-price {
		color: #999;
		font-size: 23rpx;
		text-decoration: line-through;
	}

	.cart-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100rpx;
		width: 100%;
		background: #fff;
		display: flex;
		align-items: center;
		z-index: 499;
	}

	.cart-bottom .checkbox {
		height: 40rpx;
		padding-left: 60rpx;
		line-height: 40rpx;
		margin: 0 18rpx 0 36rpx;
		background: url() no-repeat;
		background-size: 40rpx;
		font-size: 29rpx;
	}

	.cart-bottom .checkbox.checked {
		background: url() no-repeat;
		background-size: 40rpx;
	}

	.cart-bottom .total {
		height: 34rpx;
		flex: 1;
		font-size: 30rpx;
		font-weight: 600;
		margin-top: -10rpx;
	}

	.cart-bottom .checkout {
		height: 50rpx;
		width: 200rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 29rpx;
		background: #e64340;
		margin: 0 20rpx;
		color: #fff;
		border-radius: 30rpx;
	}

	.cart-view .item .price {
		width: 365.625rpx;
		height: 30rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
	}
	.name-value {
		font-size: 16rpx;
	}
</style>
